<template>
  <Tabs>
    <TabPane label="站点设置">
      <Form :model="site" :label-width="100">
        <FormItem label="站点名称">
          <Input v-model="site.title"></Input>
        </FormItem>

        <FormItem label="站点地址">
          <Input v-model="site.url"></Input>
        </FormItem>

        <FormItem label="关键词">
          <Input v-model="site.keywords"></Input>
        </FormItem>

        <FormItem label="站点描述">
          <Input v-model="site.description"></Input>
        </FormItem>

        <FormItem label="底部说明">
          <Input type="textarea" v-model="site.footer"></Input>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="post('site',site)">保存</Button>
        </FormItem>
      </Form>
    </TabPane>

    <TabPane label="邮箱设置">
      <Form :model="email" :label-width="100">
        <FormItem label="服务器">
          <Input v-model="email.host"></Input>
        </FormItem>

        <FormItem label="端口">
          <Input v-model="email.port"></Input>
        </FormItem>

        <FormItem label="安全模式">
          <RadioGroup v-model="email.secure">
            <Radio :label="0">否</Radio>
            <Radio :label="1">是</Radio>
          </RadioGroup>
        </FormItem>

        <FormItem label="账号">
          <Input v-model="email.user"></Input>
        </FormItem>

        <FormItem label="密码">
          <Input v-model="email.password"></Input>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="post('email',email)">保存</Button>
        </FormItem>
      </Form>
    </TabPane>

    <TabPane label="数据存储">
      <Form :model="storage" :label-width="100">
        <FormItem label="图片存储位置">
          <Select v-model="storage.name" style="width:200px">
            <Option v-for="item in storageList" :value="item.name" :key="item.name">{{ item.label }}</Option>
          </Select>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="post('storage',storage)">保存</Button>
        </FormItem>
      </Form>
    </TabPane>
  </Tabs>
</template>
<script>
import { config } from "@/api";
import {
  Form,
  FormItem,
  Input,
  Button,
  Tabs,
  TabPane,
  RadioGroup,
  Radio,
  Select,
  Option
} from "iview";
export default {
  components: {
    Form,
    FormItem,
    Input,
    Button,
    Tabs,
    TabPane,
    RadioGroup,
    Radio,
    Select,
    Option
  },
  data() {
    return {
      storageList: [
        { name: "local", label: "本地存储" },
        { name: "qiniu", label: "七牛云" }
      ],
      site: {},
      email: {
        secure: 1
      },
      storage: {}
    };
  },
  methods: {
    get() {
      config.getList().then(res => {
        if (res.data.site) {
          this.site = res.data.site;
        }
        if (res.data.email) {
          this.email = res.data.email;
        }
        if (res.data.storage) {
          this.storage = res.data.storage;
        }
      });
    },
    post(type, data) {
      // console.log(type);
      config.update(type, data).then(res => {});
    }
  },
  mounted() {
    this.get();
  }
};
</script>
